/**
 * Created by douxin on 23/09/2016.
 */

import React from 'react';
import echarts from 'echarts';
import { getChannelStatisticData, removeBlankValue } from './StatisticService';

class ChannelStatisticPieChart extends React.Component {

    getOptions() {
        const data = removeBlankValue(getChannelStatisticData(this.props.trades));
        return {
            color: ['#1da7db', '#0dca91', '#e74658', '#a182fb', '#e3da48'],
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series : [
                {
                    name: '交易渠道',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    data: data.map((v, k) => {
                        return {
                            value: v.value, name: v.title
                        }
                    }),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }

    componentDidMount() {
        this.myChart = echarts.init(document.getElementById('channel-statistic-pie-chart'));
        this.myChart.setOption(this.getOptions());
    }

    componentDidUpdate() {
        // console.log('ChannelStatisticPieChart:', this.props.trades);
        this.myChart.setOption(this.getOptions());
    }

    render() {
        return (
            <div id="channel-statistic-pie-chart"></div>
        );
    }
}

ChannelStatisticPieChart.propTypes = {
    trades: React.PropTypes.array
};

export default ChannelStatisticPieChart;